@charset "utf-8";
*{
	margin: 0;
	padding: 0;
}
ul li{
	list-style: none;
}
img{
	border: 0;
}
/* 垂直居中 */
.small-img{
	display: flex;
	align-items:center;
	justify-content: center;
}
.clearfix:before,
.clearfix:after{
  display: table;
  line-height: 0;
  content: "";
}
.magnifier{
	width: 500px;
	position: relative;
	margin-top: 100px;
	margin-left: 100px;
}
.magnifier-container{
	width: 500px;
	height: 500px;
	overflow: hidden;
	position: relative;
	/* border: 1px solid #ddd; */
}
.move-view{
	width: 100px;
	height: 100px;
	position: absolute;
	/* background-image: url('./images/move-box.png'); */
}
.images-cover{
	height: 100%;
	width: 100%;
	position: relative;
}
.images-cover img{
	position: absolute;
}
.magnifier-assembly{
	height: 92px;
	overflow: hidden;
	position: relative;
	padding-left: 30px;
	padding-right: 30px;
}
.magnifier-btn{
	position: absolute;
	font-family: "宋体";
	width: 100%;
	top: 50%;
	left: 0;
	margin-top: -40px;
}
.magnifier-btn span{
	line-height: 80px;
	height: 80px;
	width: 20px;
	background-color: #6e6e6e;
	color: #fff;
	display: block;
	z-index: 9998;
	text-align: center;
	font-size: 20px;
	cursor: pointer;
	border-radius: 3px;
}
.magnifier-btn .magnifier-btn-left{
	float: left;
}
.magnifier-btn .magnifier-btn-right{
	float: right;
}
.magnifier-line{
	position: relative;
	overflow: hidden;
	height: 92px;
}
.magnifier-line ul{
	display: block;
	font-size: 0;
	width: 10000%;
	position: absolute;
	left: 0;
	z-index: 9997;
}
.magnifier-line li{
	float: left;
	width: 100px;
	cursor: pointer;
}
.magnifier-line ul > .active .small-img{
	border-color: #bbb;
}
.small-img{
	height: 78px;
	padding: 1px;
	margin: 5px;
	overflow: hidden;
	border: 1px solid #ddd;
	text-align: center;
}
.small-img img{
	max-width: 100%;
	max-height: 100%;
}
.magnifier-view{
	width: 100%;
	height: 100%;
	position: absolute;
	right: -105%;
	top: 0;
	z-index: 9999;
	background-color: #fff;
	display: none;
	overflow: hidden;
}
.magnifier-view img{
	display: block;
}
.animation03{
	transition: all 0.3s ease-in 0.1s;
	-ms-transition: all 0.3s ease-in 0.1s;
	-moz-transition: all 0.3s ease-in 0.1s;
	-webkit-transition: all 0.3s ease-in 0.1s;
	-o-transition: all 0.3s ease-in 0.1s;
}

/*放大镜区域  */
.magnifier-left {
    width: 340px;
    height: 500px;
}
/* 自定义样式，去层叠插件的样式 */
.my-magnifier {
    margin-top: 0;
    margin-left: 0;
}
/* .magnifier-container{
    width: 340px;
    height: 410px;
} */
.magnifier-right {
    width: 800px;
    height: 500px;
}

.pro-msgs { background-color: #f2f2f2; padding: 20px 0;}
.pro-msgs .pro-titles { font-size: 16px; color: #646464;}
.pro-msgs .pro-titles .title-text { font-size: 24px; color: #333;}

.pro-msgs .pro-cont { width: 100%; height: 512px; background-color: #fff;}

 /* 详情信息右边部分 */
 .pro-msgs .top-right { padding: 20px 0; box-sizing: border-box;}
 .pro-msgs .top-right .right-title{ font-size: 22px; font-weight: normal; color: #343434;}
 .pro-msgs .top-right .right-msg { font-size: 18px; color: #fb2f2f; margin-top: 16px; margin-bottom: 16px;}
 .pro-msgs .top-right .right-author { font-size: 16px; color: #818181;}
 .pro-msgs .right-purchase { width: 788px; background-color: #f5f5f5; padding: 16px; box-sizing: border-box;}
 .pro-msgs .right-purchase .purchase-price{ font-size: 16px; color: #6c6c6c; margin-bottom: 20px;}
 .pro-msgs .right-purchase .purchase-price .nowPrice { font-size: 24px; color: #f80e0e; font-weight: bold;}
 .pro-msgs .right-purchase .purchase-price .beforePrice { text-decoration: line-through;}
 .pro-msgs .right-purchase .purchase-msg .msg-pro { color: #f80e0e; font-size: 16px;}
 .pro-msgs .right-purchase .purchase-coupons { margin-top: 30px;}
 
 .pro-msgs .right-choice { margin-top: 20px; margin-bottom: 30px;}
 .pro-msgs .right-choice .choice-left { width: 100px; height: 34px; text-align: center; line-height: 34px; border: 1px solid #ccc; box-sizing: border-box; position: relative; margin-right: 20px; cursor: pointer;}
 .pro-msgs .right-choice .choice-left .choice-true { display: none; width: 16px; height: 16px; text-align: center; line-height: 16px; position: absolute; bottom: 0; right: 0; color: #fff; background-color: #f60;}
 .pro-msgs .right-choice p { margin-top: 6px;}
 .pro-msgs .right-choice .choice-on { border: 1px solid #f60;}
 
 .pro-msgs .right-quantity .quantity-cont{ width: 64px; border: 1px solid #ccc; box-sizing: border-box; position: relative; margin-right: 20px; margin-top: 10px;}
 .pro-msgs .right-quantity .quantity-count{ width: 42px; height: 42px; text-align: center; border: none;}
 .pro-msgs .right-quantity .quantity-add { width: 21px; height: 21px; border: 1px solid #ccc; text-align: center; box-sizing: border-box; position: absolute; top: 0; right: 0; background-color: #e6e6e6; user-select: none; cursor: pointer;}
 .pro-msgs .right-quantity .quantity-reduce { width: 21px; height: 21px; border: 1px solid #ccc; text-align: center; box-sizing: border-box; position: absolute; bottom: 0; right: 0; background-color: #e6e6e6; user-select: none; cursor: pointer;}
 .pro-msgs .right-quantity .quantity-car { width: 190px; height: 60px; text-align: center; line-height: 60px; background-color: #f60;}
 .pro-msgs .right-quantity .quantity-car .car-link { display: block; width: 190px; height: 60px; color: #fff; font-size: 26px;}
 .pro-msgs .right-bottom { color: #808080; margin-top: 20px;}

 /* 3 人气单品 */
.popular { margin-top: 25px; margin-bottom: 30px;}
.popular .discount-title { width: 124px; height: 48px; background-color: #f60; font-size: 24px; color: #fff; text-align: center; line-height: 48px;}
.popular .discount-list { width: 240px; height: 260px; padding-top: 10px;}
.popular .discount-list .list-msg { margin-top: 5px; margin-bottom: 5px; margin-left: 20px;}
.popular .discount-list .pro-img { width: 150px; margin: 0 auto;}
.popular .discount-list .start-text { color: #f4290d;}
.popular .discount-list .list-start { margin-left: 10px;}

.popular ul .active { background-color: #f2f2f2;}

.popular .discount-list .list-price { margin-left: 10px;}
.now-price { color: #f4290d; font-size: 24px;}
.before-price { color: #c0c0c0; text-decoration: line-through; font-size: 24px;}

/* 4 介绍与评价 */
.details { margin-bottom: 50px;}
 /* 左 */
.details .details-left { width: 316px; border: 1px solid #ccc; margin-right: 12px;}
.details .details-left .left-title{ height: 40px; line-height: 40px; background-color: #f4f4f4; padding-left: 10px; box-sizing: border-box; font-size: 22px;}
.details .details-left .left-msg { padding: 10px 10px;}
.details .details-left .pro-img { width: 150px; margin: 0 auto;}
.details .details-left .left-list { height: 302px; border-bottom: 2px solid #ccc;  padding: 10px 10px; box-sizing: border-box;}
.details .details-left .left-list:last-child { border-bottom: none;}
.details .details-left .left-list .list-cont { width: 184px; margin: 10px auto;}

 /* 右 */
.details .details-right .right-title { width: 870px; border-bottom: 6px solid #f60;}
.details .details-right .right-title a { display: block; width: 160px; height: 48px; text-align: center; line-height: 48px; font-size: 24px;}
.details .details-right .right-title .active { background-color: #f60; color: #fff;}


/* 评价 */
.evaluate .evaluate-census { padding: 20px 20px; box-sizing: border-box; margin-top: 20px;}

.evaluate .evaluate-census .praise { width: 150px; margin-right: 45px;}
.evaluate .evaluate-census .praise .praise-num { display: block; width: 150px; font-size: 72px; color: #f8380c;  line-height: 72px;}
.evaluate .evaluate-census .praise .praise-text { display: block; margin-left: 75px; font-size: 20px; color: #999;}

.evaluate .evaluate-census .progress{  margin-right: 45px;}
.evaluate .evaluate-census .progress .progress-text { display: block; width: 80px; font-size: 16px; margin-bottom: 16px;}

.evaluate .username { width: 350px;}
.evaluate .username .user-list { width: 160px; font-size: 16px; color: #666;}
.evaluate .username .user-list:nth-child(2n+1) { margin-right: 20px;}
.evaluate .username .user-list:nth-child(n+3) { margin-top: 15px;}
.evaluate .username .user-list .user-cont { margin-left: 60px;}

.evaluate .comment { height: 30px; background-color: #f5f5f5; line-height: 30px; font-size: 16px; padding: 0 20px; box-sizing: border-box;}
.evaluate .comment .comment-all a{ color: #f8380c;}
.evaluate .comment .comment-itme { margin-left: 36px;}

.evaluate .evaluate-itme .evaluate-list { height: 130px; padding: 20px 20px; box-sizing: border-box; border-bottom: 2px solid #f5f5f5 ;}
.evaluate .evaluate-itme .evaluate-list .list-left { width: 120px; color: #a6a6a6;}
.evaluate .list-left .left-msg { margin-top: 8px; margin-bottom: 8px;}

.evaluate .list-middle { width: 460px; color: #666; margin-left: 30px;}

.evaluate .list-right .right-msg { color: #f4b212;}

/* 分页 */
.evaluate .evaluate-page { width: 330px; height: 32px; text-align: center; line-height: 32px; font-size: 18px; margin-left: 540px; margin-top: 24px;}
.evaluate .evaluate-page .page-itme { width: 32px; height: 32px; border: 1px solid #e6e6e6; box-sizing: border-box; margin-right: 6px;}
.evaluate .evaluate-page .page-itme:last-child { width: 64px; margin-right: 0; margin-left: 5px;}

.evaluate .evaluate-page .active { border: none;}
.evaluate .evaluate-page .active a{ color: #f8380c;} 

.sel{
	width: 150px;
}
